<template>
  <!--  :class="[productShow||industryShow||aboutShow||serveShow?'dsScroll':'']" -->
  <div class="index">
    <div class="commonHeader">
      <div class="headercontain" :class="[topShow?'showBg':'']">
        <div class="headerLeft" >
         <div class="headerLeft-logo" @click="goHome">
          <img src="@/assets/img/logo.png" alt="" />
          <div class="logo-name">
            <h1>仰望科技</h1>
            <p>YANGWANG Technology</p>
          </div>
         </div>
         <div class="headerLeft-navbar">
            <div
              class="navbar_item"
              v-for="(item,index) in $tm('navbarList')"
              :class="navbarIndex==(index+1)?'navbar_itemActive':''"
              
            >
            <p @click.stop="showNav(index+1)">{{item}}</p>
            <!-- 产品列表 -->
            <div class="productNav showH" @touchmove.prevent v-if="productShow&&index==1">
              <div class="hotProduct">
                <div class="hotProduct-title" :class="[$i18n.locale=='en'?'titleEng':'']">
                  {{ $t('hotProducts') }}
                </div>
                <div class="hotProduct-list">
                  <div class="hotProduct-item" v-for="(v,i) in hotProduct" :key="i" @click.stop="routerProduct(v.id,v)">
                    <div class="hotProduct-item-pic">
                      <img :src="v.icon" alt="" />
                    </div>
                    <p>{{ $i18n.locale=='zh'?v.series_name:v.series_name_en }}</p>
                  </div>
                </div>
              </div>
              <div class="productClassify">
                <div class="productClassify-title" :class="[$i18n.locale=='en'?'titleEng':'']">
                  {{ $t('productClass') }}
                </div>
                <div class="productClassify-list">
                  <div class="productClassify-item" v-for="(c,ii) in typeList" :key="ii">
                    <h2>{{ $i18n.locale=='zh'?c.prd_type_name:c.prd_type_name_en }}</h2>
                    <div class="productClassify-item-child" v-for="(n,iii) in prdList[c.id]" :key="iii" @click.stop="routerProduct(n.id,n)">
                      {{  $i18n.locale=='zh'?n.series_name:n.series_name_en }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 行业列表 -->
            <div class="industryNav showH" @touchmove.prevent v-if="industryShow&&index==2">
              <div class="industryNav-list">
                <div class="industryNav-list-item" v-for="(c,i) in $tm('indexIndustryList')" :key="i" @click.stop="routerIndustry(i+1)">
                  <div class="item-bg">
                    <img :src="require(`@/assets/img/indexIndustrys${i+1}.png`)" alt="">
                  </div>
                  <p>{{ c.chinese }}</p>
                </div>
              </div>
            </div>
            <!-- 服务 -->
            <div class="serveNav showH" @touchmove.prevent v-if="serveShow&&index==3">
              <div class="serveNav-list">
                <div class="serveNav-list-item" v-for="(v,i) in $tm('serveNav')" :key="i" @click.stop="routerServe(i+1)">
                  <div class="item-pic">
                    <img :src="require(`@/assets/img/serveNav${i+1}.png`)" alt="" />
                  </div>
                  <div class="item-name">{{v}}</div>
                </div>
              </div>
            </div>
            <!-- 关于 -->
            <div class="aboutNav showH" @touchmove.prevent v-if="aboutShow&&index==4">
              <div class="aboutNav-list">
                <div class="aboutNav-list-item" v-for="(v,i) in $tm('aboutNav')" :key="i"  @click.stop="routerAbout(i+1)">
                  <div class="item-pic">
                    <img :src="require(`@/assets/img/aboutNav${i+1}.png`)" alt="" />
                  </div>
                  <div class="item-name">{{v}}</div>
                </div>
              </div>
            </div>
          </div>
          </div>
        </div>
        <div class="headerRight">
          <!-- <div class="headerRight-search">
            <img src="@/assets/img/search.png" alt="" />
            <span>{{ $t('search') }}</span>
          </div> -->
          <div class="headerRight-language">
            <select name="" id="" @change="changeLanguage">
              <option value="中文">中文</option>
              <option value="English">English</option>
            </select>
          </div>
          <div class="headerRight-about">
            {{ $t('contactUs') }}
          </div>
        </div>
      </div>
    </div>
    <div class="main">
      <router-view :key="$route.fullPath"/>
    </div>
    <!--  -->
    <div class="footer"  data-aos="fade-up"  data-aos-once='true'>
      <div class="footerMain">
        <div class="footerCopy">
          <div class="footerCopy-logo">
            <img src="@/assets/img/logo.png" alt="" />
          </div>
          <h1>深圳仰望科技有限公司</h1>
          <p>ShenZhen YANGWANG</p>
          <p class="last">ShenZhen YANGWANG Technology company</p>
        </div>
        <div class="footerNav">
          <div class="footerNav-item" v-for="(v,i) in $tm('footerNav')" :key="i">
            <h1>{{ v.cn }}</h1>
            <p v-for="(c,n) in v.child" :key="n" @click="footerClick(c)">{{ c.text }}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="mask" v-if="productShow||industryShow||aboutShow||serveShow" @click="hideShow"></div>
    <!--  -->
  </div>
</template>
<script>
import API from '@/utils/request.js';
import  {useI18n } from 'vue-i18n';
import AOS from "aos";

export default {
    name:'index',
    data(){
        return{
            navbarIndex:1,
            hotProduct:[],
            prdList:[],
            typeList:[],
            
            bodyHeihgt:0,
            topShow:false,
            language:'中文',
            start:true,
            imgText:'',
            imgShow:false,
            productShow:false,
            serveShow:false,
            aboutShow:false,
            industryShow:false,
            i18n:useI18n(),
        }
    },
    watch: {
      
    },
    mounted(){
        // this.navbarList = $t('meg.navbarList');
        this.bodyHeihgt = document.body.clientHeight*2;
        window.addEventListener('scroll',this.scroll,true)
        let routePath = this.$route.path;
        if(routePath.indexOf('product')>-1){
            this.navbarIndex=2
        }
        else if(routePath.indexOf('serve')>-1){
            this.navbarIndex=4
        }
        else if(routePath.indexOf('aboutUs')>-1){
            this.navbarIndex=5
        }
        else if(routePath.indexOf('industry')>-1){
            this.navbarIndex=3
        }
        else{
            this.navbarIndex=1
        }
        this.getHotSeries()
        this.getPrdSeries()
        this.getPrdType()
        AOS.init({
            offset: 200,   
            duration: 600,   
            easing: 'ease-in-sine',   
            delay: 100
        })
        setTimeout(()=>{
            this.start = false
        },5000)
    },
    destroyed(){
        window.removeEventListener("scroll", this.scroll, true)
    },
    methods:{
        showNav(n){
          switch(n){
                case 1:
                    this.industryShow = false;
                    this.serveShow = false;
                    this.aboutShow = false;
                    this.productShow = false;
                    if(this.$route.path!='/home'){
                      this.navbarIndex = n
                      this.$router.push({path:'/home'});
                    }
                    
                    break;
                case 2:
                    this.industryShow = false;
                    this.serveShow = false;
                    this.aboutShow = false;
                    this.productShow = !this.productShow;
                    break;
                case 3:
                    this.productShow = false;
                    this.serveShow = false;
                    this.aboutShow = false;
                    this.industryShow = !this.industryShow;
                    break;
                case 4:
                    this.productShow = false;
                    this.industryShow = false;
                    this.aboutShow = false;
                    this.serveShow = !this.serveShow;
                    break;    
                case 5:
                    this.productShow = false;
                    this.industryShow = false;
                    this.serveShow = false;
                    this.aboutShow = !this.aboutShow;
                    break;      
                default:
                    break;
            }
            this.navbarIndex = n
        },
        footerClick(v){
          if(v.type==1){
            this.$router.push({path:v.path})
          }
          else if(v.type==2){
            window.location.href = `tel:${v.text}`
          }
        },
        routerProduct(id,v){
          this.hideShow()
          let name = {zh:v.series_name,en:v.series_name_en};
          sessionStorage.setItem("productName",JSON.stringify(name))
          this.$router.push({path:'/product',query:{id:id}})
        },
        routerServe(n){
          this.hideShow()
          let path = '';
          switch(n){
                case 1:
                    path = '/resourceDownload'
                    break;
                case 2:
                    path = '/qusetion'
                    break;
                default:
                    break;
            }
          this.$router.push({path:`/serve${path}`})
        },
        hideShow(){
          this.industryShow = false;
          this.serveShow = false;
          this.aboutShow = false;
          this.productShow = false;
        },
        routerIndustry(n){
          this.hideShow();
          let path = '';
          switch(n){
                case 1:
                    path = '/page3'
                    break;
                case 2:
                    path = '/page2'
                    break;
                case 3:
                    path = '/page1'
                    break;    
                case 4:
                    path = '/page4'
                    break;      
                default:
                    break;
            }
          this.$router.push({path:`/industry${path}`})
        },
        routerAbout(n){
          this.hideShow();
          let path = '';
          switch(n){
                case 1:
                    path = '/index'
                    break;
                case 2:
                    path = '/culture'
                    break;
                case 3:
                    path = '/technology'
                    break;    
                case 4:
                    path = '/culture'
                    break;      
                default:
                    break;
            }
          this.$router.push({path:`/aboutUs${path}`})
        },
        routeVue(n){
            if(n==this.navbarIndex) return false;
            let path = '';
            switch(n){
                case 1:
                    path = '/product'
                    break;
                case 2:
                    path = '/product'
                    break;
                case 3:
                    path = '/serve'
                    break;    
                // case 3:
                //     path = '/aboutUs'
                //     break;      
                default:
                    break;
            }
            this.navbarIndex = n
            this.$router.push({path:path})
        },
        // 热门产品
        getHotSeries(){
            API.hotSeries().then(res=>{
                if(res.code==200){
                  this.hotProduct = res.data;
                }
            })
        },
        // 产品小类
        getPrdSeries(){
            API.prdSeries().then(res=>{
                if(res.code==200){
                  this.prdList = res.data;
                }
            })
        },
        // 产品大类
        getPrdType(){
            API.prdType().then(res=>{
                if(res.code==200){
                  this.typeList = res.data;
                }
            })
        },
        goHome(){
          this.$router.push({path:'/'})
          this.navbarIndex=1;
        },
        backTop(){
            let time = setInterval(() => {
                if(document.documentElement.scrollTop!=0||document.body.scrollTop!=0){
                    document.documentElement.scrollTop -= 50
                    document.body.scrollTop -= 50
                }
                else{
                    clearInterval(time)
                }
            }, 10);
            
            
        },
        scroll(){
            let scrollTop = window.pageYOffset ||document.documentElement.scrollTop||document.body.scrollTop;
            if(scrollTop>=100){
                this.topShow = true
            }
            else{
                this.topShow = false;
            }
        },
        changeLanguage(){
          if(this.language=='中文'){
            
            this.$i18n.locale='en'
            this.language='English'
          }
          else{
            this.$i18n.locale='zh'
            this.language='中文'
          }
        },
        //停止页面滚动
        stopMove(){
            let m = function(e){e.preventDefault();};
            document.body.style.overflow='hidden';
            document.addEventListener("touchmove",m,{ passive:false });//禁止页面滑动
        },
        //开启页面滚动
        Move(){
            let m =function(e){e.preventDefault();};
            document.body.style.overflow='';//出现滚动条
            document.removeEventListener("touchmove",m,{ passive:true });
        },
    }
}
</script>
<style lang="scss">
.index {
  width: 100%;
  height: 100%;
  background: #ffffff;
  transition: all 0.5s linear;
  // padding-top: 88px;
  box-sizing: border-box;
  .commonHeader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: transparent;
    height: r(140);
    z-index: 12;
    .headercontain {
      width: 100%;
      height: 100%;
      padding: 0 r(104) 0 r(52);
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      .headerLeft {
        height: r(80);
        display: flex;
        align-items: center;
        &-logo{
          height: r(80);
          display: flex;
          position: relative;
          align-items: center;
          overflow: hidden;
          img{
            width: r(80);
            height:r(80);
          }
          .logo-name{
            margin-left: r(18);
            h1{
              font-size: r(30);
              color: #fff;
              line-height: r(43.44);
              padding: r(9) 0 r(2) 0;
            }
            p{
              font-size: r(10);
              color: #F7F9FC;
            }
          }
        }
        .headerLeft-navbar {
          height: 100%;
          display: flex;
          align-items: center;
          cursor: pointer;
          margin-left: r(98);
          .navbar_item {
            height:r(140);
            line-height: r(140);
            font-size: r(26);
            color: #fff;
            margin-left: r(66);
            
            .productNav{
              position: fixed;
              top: r(140);
              left: 0;
              width: 100%;
              padding: r(51) r(233) r(60);
              box-sizing: border-box;
              background-color: #fff;
              z-index: 9;
              border-bottom: 1px solid #273443;
              box-shadow: 6px 3px 19px #273443;
              .hotProduct{
                width: 100%;
                @include display(top,left);
                &-title{
                  width: r(87);
                  font-size: r(30);
                  color: #273443;
                  line-height: r(43);
                  font-weight: bold;
                  margin:r(22) r(68.96) 0 0;
                  text-align: right;
                }
                .titleEng{
                  font-size: r(24);
                }
                &-list{
                  display: flex;
                  flex-wrap: wrap;
                  .hotProduct-item{
                    margin:0 r(49) r(99) 0;
                    width: r(212);
                    &-pic{
                      width: r(100);
                      height: r(100);
                      @include display(center,center);
                      img{
                        max-width: 100%;
                        height: auto;
                        max-height: 100%;
                        width: auto;
                      }
                    }
                    p{
                      font-size: r(24);
                      line-height: r(35);
                      color: #273443;
                      text-align: left;
                      margin-top: r(9);
                      opacity: .5;
                    }
                  }
                  .hotProduct-item:nth-child(5n){
                    margin: 0 r(0) r(99) 0;
                  }
                }
              }
              .productClassify{
                width: 100%;
                @include display(top,left);
                &-title{
                  width: r(60);
                  font-size: r(30);
                  color: #273443;
                  line-height: r(43);
                  font-weight: bold;
                  text-align: right;
                  margin-left: r(27);
                }
                .titleEng{
                  font-size: r(24);
                }
                &-list{
                  @include display(top,left);
                  margin:r(5) 0 0 r(65);
                  .productClassify-item{
                    width: r(212);
                    margin-right: r(49);
                    h2{
                      font-size: r(24);
                      color: #273443;
                      line-height: r(38);
                      font-weight: 400;
                      margin-bottom: r(22);
                    }
                    &-child{
                      font-size: r(24);
                      line-height: r(35);
                      color: #273443;
                      opacity: .5;
                      margin-bottom: r(18);
                    }
                  }
                  .productClassify-item:last-child{
                    margin-right: 0;
                  }
                }
              }
            }
            .industryNav{
              position: fixed;
              top: r(140);
              left: 0;
              width: 100%;
              box-sizing: border-box;
              background-color: #fff;
              z-index: 9;
              padding: r(152) r(52) r(179);
              border-bottom: 1px solid #273443;
              box-shadow: 6px 3px 19px #273443;
              .industryNav-list{
                width: 100%;
                @include display(center,center);
                .industryNav-list-item{
                  width: r(266);
                  height: r(300);
                  position: relative;
                  @include display(bottom,right);
                  background:linear-gradient(to bottom,#273443,rgba(4,12,46,0)) ;
                  margin-right: r(26.63);
                  .item-bg{
                    width: 100%;
                    height:100%;
                  }
                  p{
                    position: absolute;
                    top: r(26.47);
                    left: 0;
                    width: r(147.78);
                    padding-left: r(25.98);
                    box-sizing: border-box;
                    line-height: r(58);
                    font-size: r(40);
                    font-weight: bold;
                    color: #fff;
                  }
                }
                .industryNav-list-item:last-child{
                  margin-right: 0;
                }
                .industryNav-list-item::before{
                  position: absolute;
                  display: block;
                  width: 100%;
                  height: 100%;
                  content: "";
                  background-color: #273443;
                  z-index: -1;
                }
              }
            }
            .serveNav{
              width: 100%;
              padding:r(189) 0 r(203.54);
              box-sizing: border-box;
              background-color: #fff;
              position: fixed;
              top: r(140);
              left: 0;
              z-index: 9;
              border-bottom: 1px solid #273443;
              box-shadow: 6px 3px 19px #273443;
              &-list{
                width: 100%;
                @include display(center,center);
                &-item{
                  width: r(120);
                  margin-left: r(315);
                  .item-pic{
                    width: r(120);
                    height: r(125);
                    @include display(center,center);
                    img{
                      max-width: 100%;
                      max-height: 100%;
                    }
                  }
                  .item-name{
                    margin-top: r(70.46);
                    text-align: center;
                    font-size: r(30);
                    color: #273443;
                    line-height: r(43);
                  }
                }
                &-item:first-child{
                  margin-left: 0;
                }
              }
            }
            .aboutNav{
              width: 100%;
              padding:r(200) 0 r(203);
              box-sizing: border-box;
              background-color: #fff;
              position: fixed;
              top: r(140);
              left: 0;
              z-index: 9;
              border-bottom: 1px solid #273443;
              box-shadow: 6px 3px 19px #273443;
              // display: none;
              &-list{
                width: 100%;
                @include display(center,center);
                &-item{
                  width: r(120);
                  margin-left: r(166);
                  .item-pic{
                    width: r(120);
                    height: r(118.18);
                    @include display(center,center);
                    img{
                      max-width: 100%;
                      max-height: 100%;
                    }
                  }
                  .item-name{
                    margin-top: r(66.28);
                    text-align: center;
                    font-size: r(30);
                    color: #273443;
                    line-height: r(43);
                  }
                }
                &-item:first-child{
                  margin-left: 0;
                }
              }
            }
          }
          .navbar_itemActive {
            position: relative;
            color: #E15100;
            font-weight: bold;
          }
          .navbar_item:hover {
            color: #E15100;
            font-weight: bold;
          }
          .navbar_item:nth-child(1):hover{
            .productNav{
              display: block;
            }
          }
          .navbar_item:nth-child(2):hover{
            .industryNav{
              display: block;
            }
          }
          .navbar_itemActive::after {
            position: absolute;
            display: block;
            content: "";
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            bottom: r(30);
            height: r(4);
            background: #fff;
            border-radius: r(4);
            animation: sclaes 0.3s linear;
          }
        }
        &-logo::before{
          display: block;
          content: "";
          position: absolute;
          top:0;
          width: r(15);
          height: r(80);
          background: rgba(255,255,255,.4);
          transform: skew(-50deg);
          animation: leftS 1.5s linear infinite;
        }
      }
      .headerRight {
        height: 100%;
        display: flex;
        align-items: center;
        cursor: pointer;
        .headerRight-search{
           display: flex;
           height: r(35);
           align-items: center;
           margin-bottom: r(3);
           img{
            width: r(22);
            height: r(21);   
           }
           span{
            font-size: r(24);
            height: r(35);
            line-height: r(35);
            color: #fff;
            margin-left: r(11);
           }
        }
        .headerRight-language{
          color: #fff;
          font-size: r(24);
          margin: 0 r(49) 0 r(50);
          height: r(35);
          select{
            border: none;
            height: r(35);
            appearance: none;
            -webkit-appearance: none;
            outline: none;
            padding-right: r(20);
            // width:r(100);
            color: #fff;
            font-size: r(24);
            background: url('../assets/img/xiala.png') no-repeat  right center transparent;
            background-size: r(14);
            option{
              width: 100%;
              font-size: r(24) !important;
              text-align: center;
              color: #000000;
            }
          }
        }
        .headerRight-about{
          width: r(118);
          height: r(40);
          line-height: r(40);
          text-align: center;
          background-color: #E15100;
          color: #f4f4f4;
          font-size: r(20);
        }
      }
    }
    .showBg{
      background-color: #273443;
      // box-shadow: 0px 6px 24px rgba(35, 73, 122, 0.06);
    }
  }
  .footer {
    width: 100%;
    height: r(566);
    background: #273443;
    &Main {
      width: 100%;
      display: flex;
      justify-content: space-between;
      padding: r(109) r(105) 0 r(108);
      box-sizing: border-box;
      .footerCopy{
        &-logo{
          width: r(71);
          height: r(71);
          background-color: #fff;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          img{
            width: r(59.55);
            height: r(59.55);
          }
        }
        h1{
          font-size: r(24);
          line-height: r(36);
          color: #fff;
          padding: r(37) 0;
        }
        p{
          color: #fff;
          font-size: r(20);
          line-height: r(30);
        }
        .last{
          margin-top: r(58 );
        }
      }
      .footerNav {
        display: flex;
        align-items: flex-start;
        padding-top: r(98);
        &-item{
          margin-left: r(138);
          cursor: pointer;
          h1{
            line-height: r(36);
            font-size: r(24);
            color: #fff;
            margin-bottom: r(40);
          }
          p{
            margin-bottom: r(29);
            font-size: r(18);
            line-height: r(27);
            color:#fff;
            max-width: 500px;
          }
        }
      }
    }
  }
  .imageMask {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.12);
    z-index: 14;
    display: flex;
    align-items: center;
    justify-content: center;
    .imageContain {
      width: 1144px;
      height: 700px;
      background: #ffffff;
      border-radius: 20px;
      position: relative;
      padding: 0 27px;
      box-sizing: border-box;
      h3 {
        font-size: 24px;
        font-weight: 500;
        line-height: 41px;
        color: #000000;
        padding: 12px 0;
      }
      .imageOpen {
        position: absolute;
        right: 27px;
        top: 22px;
        width: 54px;
        height: 22px;
        cursor: pointer;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .content {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 604px;
        background: #f4f7f9;
        border-radius: 20px;
        img {
          max-height: 100%;
          max-height: 100%;
        }
        .text {
          width: 998px;
          height: 100%;
          margin: 0 auto;
          padding: 31px 0;
          font-size: 16px;
          font-weight: 500;
          line-height: 24px;
          color: #000000;
          overflow-y: auto;
          white-space: pre-line;
          box-sizing: border-box;
        }
      }
    }
  }
}
.serve{
  width: 100%;
  height: 353px(353);
  position: relative;
  &-bg{
      width: 100%;
      height: 100%;
      position: relative;
      img{
          width: 100%;
          height: 100%;
      }
  }
  &-bg::before{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: block;
      content: "";
      z-index: 1;
      background: linear-gradient(#0A52BA 0%,rgba(68,132,224,0) 100%);
  }
  .serve-content{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      z-index: 2;
      .serve-l{
          width: r(146);
          height: r(146);
          margin-left: r(167);
          background-color: #fff;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          img{
              width: r(122.45);
              height: r(122.45);
          }
      }
      .serve-r{
          margin-left: r(65);
          h1{
              line-height: r(101);
              font-size: r(70);
              font-weight: bold;
              color: #F7F9FC;
              white-space:pre-line;
          }
          p{
              margin-top: r(9);
              line-height: r(45);
              color: #F7F9FC;
              font-size: r(30);
          }
      }
  }
  
}
.dsScroll{
  position: fixed;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.mask{
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 2;
  background: transparent;
}
.showH{
  animation: showH 0.5s linear;
  // height: calc(100vh - r(140));
  
}
@keyframes sclaes {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
@keyframes showH{
  0%{
    transform-origin: top;
    transform: scaleY(0);
    opacity: 0;
  }

  100%{
    // height: 0px;
    // padding-top: 0;
    // padding-bottom: 0;
    transform-origin: top;
    transform: scaleY(1);
    opacity: 1;
  }
}
@keyframes shows {
  0% {
    opacity: 1;
    right: 0;
    top: 0;
  }
  5% {
    right: 38px;
    top: -69px;
    opacity: 1;
  }
  50%{
    right: 38px;
    top: -69px;
    opacity: 1;
  }
  55% {
    right: 0px;
    top: 0px;
    opacity: 1;
  }
  56%{
    right: 0px;
    top: 0px;
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes leftS{
    0%{left: -20%;}
    100%{left: 120%;}
}
</style>